<template>
    <div class="indexbox" cloak>
        <!-- 首页头部 -->
        <div class="myheadbox" :class="{'myscroll': headchange>=0.7}" :style="{backgroundColor:'rgba(255, 255, 255,'+headchange+') !important'}">
            <div class="headtop">
                <span>发现</span>
                <div class="headsearchbox">
                    <router-link to="/search">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-shouye5"></use>
                        </svg>
                        <input type="text" placeholder="搜索单曲">
                    </router-link>
                </div>
                <div class="headsvg">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye2"></use>
                    </svg>
                    <router-link to="/histroy">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-shouye3"></use>
                        </svg>
                    </router-link>
                </div>
            </div>
        </div>
        <!-- 首页轮播图 -->
        <mylbt></mylbt>
        <!-- 首页中间的部分 -->
        <myindexcenter></myindexcenter>
        <!-- 首页的推荐歌单以及推荐单曲 -->
        <div class="indexgedan">
            <loading v-show="xianshi" class="bbb"></loading>
            <div v-show="!xianshi">
                <h2>推荐歌单</h2>
                <ul class="ssm">
                    <li v-for="item in ssmarr" :key="item.id">
                        <indexgedan v-bind:mylistid="item.id" v-bind:mylistsrc="item.src">
                            <template v-slot:listnum> 
                                {{kiku(item.num)}}
                            </template>
                            <template v-slot:listname> 
                                {{item.name}}
                            </template>
                        </indexgedan>
                    </li>
                </ul> 
                <h2>推荐单曲</h2>
                <ul class="ssmsong">
                    <li v-for="item in songarr" :key="item.name">
                        <indexgequ v-bind:myid="item.id" v-bind:mysrc="item.src" v-bind:myname="item.name" v-bind:mypeople="item.people">
                            <template v-slot:name> 
                                {{item.name}}
                            </template>
                            <template v-slot:people> 
                                {{item.people}}
                            </template>
                        </indexgequ>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
import mylbt from "../small/mylbt.vue"
import myindexcenter from "../small/myindexcenter.vue"

import loading from "../small/loading.vue"
import indexgequ from "../small/indexgequ.vue"
import indexgedan from "../small/indexgedan.vue"
export default {
    name:"index",
    data(){
        return {
            newm:[],
            none:false,
            tim:null,
            headchange:0,

            ssmarr:[],
            songarr:[],
            arr:{},
            xianshi:true
        }
    },
    computed:{
        touming(){
            return "#ffffff5c"
        }
    },
    components:{
        mylbt,
        myindexcenter,


        loading,
        indexgequ,
        indexgedan
    },
    beforeMount: function() {
        //监听页面滚动事件
        window.addEventListener('scroll', this.windowscroll)
        document.body.addEventListener('scroll', this.windowscroll)
        //注意：如果由于自己的vue中的样式导致监听不到，可以尝试监听body或者'#app-root'的滚动事件
    },
    created(){
        if(sessionStorage.getItem("indexzhongjian") == null){
            this.getdata()
        }else{
            let arr = JSON.parse(sessionStorage.getItem("indexzhongjian"))
            this.ssmarr = arr.ssm
            this.songarr = arr.song
            this.xianshi = false
        }
    },
    methods:{
        windowscroll(){
            //浏览器兼容
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
            if(scrollTop >= 200){
                this.headchange = 1
            }else{
                this.headchange = scrollTop/200
            }
        },
        getdata(){
            axios.get(`https://apis.netstart.cn/music/personalized`).then(
                res=>{
                    let newarr = res.data.result.slice(7,13)
                    for(let i = 0;i<newarr.length;i++){
                        let obj = {}
                        obj.name = newarr[i].name
                        obj.src = newarr[i].picUrl
                        obj.id = newarr[i].id
                        obj.num = newarr[i].playCount
                        this.ssmarr.push(obj)
                    }
                    this.arr.ssm=this.ssmarr
                    axios.get(`https://apis.netstart.cn/music/personalized/newsong/?limit=16`).then(
                        res=>{
                            let thearr = res.data.result.slice(8,16)
                            for(let i = 0;i<thearr.length;i++){
                                let obj = {}
                                obj.id = thearr[i].id
                                obj.name = thearr[i].name

                                obj.people = ''
                                for(let d=0;d<thearr[i].song.artists.length;d++){
                                    if(d==0){
                                        obj.people = thearr[i].song.artists[d].name
                                    }else{
                                        obj.people += '/'+thearr[i].song.artists[d].name
                                    }
                                }
                                obj.src = thearr[i].picUrl
                                this.songarr.push(obj)
                            }
                            this.arr.song=this.songarr
                            let arr1 = JSON.stringify(this.arr)
                            sessionStorage.setItem("indexzhongjian",arr1)
                            this.xianshi = false
                        },
                        err=>{
                            console.log(err)
                        }
                    )
                },
                err=>{
                    console.log(err)
                }
            )
        },
        kiku(num){
            if(num >= 10000){
                num = (num/10000).toFixed(1)+"万"
                return num
            }else{
                return num
            }
        },
    },
}
</script>
<style lang="less" scoped>
    a{
        text-decoration: none;
        -webkit-tap-highlight-color:transparent;
    }
    ul,li{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .indexbox{
        position: relative;
        box-sizing: border-box;
        border-top: 1px solid transparent;
        width: 100%;
        // height: 1220px;
        // margin-top: 100px;
        padding-bottom: 15%;
        // background-color: red;
        &::-webkit-scrollbar { width: 0 !important }
    }
    
.myheadbox{
    width: 100%;
    height:50px;
    position: fixed;
    top: 0px;
    z-index: 100;
    background-color: rgba(255, 255, 255, 0.288);
    .headtop{
        padding: 0 10px;
        width: 100%;
        height: 50px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        span{
            font-size: 23px;
            font-weight: 700;
            font-family: "YouYuan";
            color: white;
            line-height: 50px;
        }
        .headsearchbox{
            width: 50%;
            height: 50px;
            position: relative;
            svg{
                margin-left:5px;
                color: rgba(255, 255, 255, 0.698);
                position: absolute;
                top: 35%;
                left:0px;
                font-size:1.3rem;
            }
            input{
                border: 1px solid transparent;
                outline: none;
                width: 100%;
                height: 25px;
                padding-left:30px;
                box-sizing: border-box;
                border-radius: 15px;
                margin-top:8.5%;
                background: rgba(255, 255, 255, 0.3);
                &::-webkit-input-placeholder{
                    color:rgba(255, 255, 255, 0.698);
                }
            }
        }
        .headsvg{
            svg{
                margin-top: 15%;
                color: rgba(255, 255, 255, 0.698);
                font-size:1.8rem;
                // margin: auto;
                &:first-child{
                    margin-right:15px;

                }
            }
        }
    }
    a::after{
        width: 0px !important;
        height: 0px !important;   
    }
}

.myscroll{
        background-color: rgb(255, 255, 255) !important;
        .headtop{
            span{
                color:#a3a3a3 !important;
            }
            .headsearchbox{
                svg{
                    color: #a3a3a3 !important;
                }
                input{
                    border: 1px solid #a3a3a3 !important;
                }
                input::-webkit-input-placeholder{
                    color:#a3a3a3 !important;
                }
            }
            .headsvg{
                svg{
                    color: #a3a3a3 !important;
                }
            }
        }
    }

.indexgedan{
    // padding-top: 30px;
    width: 85%;
    margin: 30px auto 0px;
    min-height: 50px;
    a{
        text-decoration: none;
        -webkit-tap-highlight-color:transparent;
    }
    ul,li{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .ssm{
        display:flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-bottom: 10px;
        li{
            width: 31%;
            display: inline-block;
            margin-bottom: 1rem;
            position: relative;
            
        }
    }
    h2{
        margin: 0;
        font-weight: 700;
        padding-left: 0.5rem;
        margin-bottom: 0.9rem;
        font-size: 1.1rem;
        height: 1.2rem;
        line-height: 1.2rem;
        font-family: "YouYuan";
        position: relative;
        color:#4475b7;
        &::after{
            content: " ";
            position: absolute;
            left: 0;
            top: 50%;
            margin-top: -9px;
            width: 1rem;
            border-radius: 50%;
            height: 1rem;
            background-color: #4475b759;
        }
    }
    img[lazy="loading"]{
        width: 100% !important;
        height: 100% !important;
    }
    .ssmsong{
        width: 100%;
        margin: 0 auto;
        li{
            width: 100%;
            display: flex;
            // justify-content: space-between;
            margin-bottom: 10px;
        }
    }
    .bbb{
        margin-top:50px;
    }
}
</style>